<template>
	<!-- 添加弹框 -->
	<el-dialog title="" width="60%" visible :show-close="false" :modal-append-to-body="false" class="wrap" @close="cancel" :close-on-click-modal="false">
		<i class="el-icon-close close" @click="cancel" style="color: white;z-index:10;"></i>
		<div class="bt">新生报名</div>
		<el-form label-width="100px" class="form">
			<el-collapse v-model="activeNames">
				<el-collapse-item title="基本信息" accordion name="1" style="">
					<el-form-item label="中文名称" class="select-block">
						<el-input v-model="vzwm" placeholder="请输入中文名" icon="add"></el-input>
					</el-form-item>

					<el-form-item label="预设班级" class="select-block">
						<el-select v-model="ysbjid" v-if="!this.$route.query.iid" placeholder="请选择...">
							<el-option :label="v.mc" :value="v.id+''" v-for="v in ysbjList"></el-option>
						</el-select>
						<el-input v-model="ysbjmc" v-if="this.$route.query.iid" disabled placeholder="" icon="add"></el-input>

					</el-form-item>
					<el-form-item label="英文名称" class="select-block">
						<el-input v-model="vywm" placeholder="请输入英文名" icon="add"></el-input>
					</el-form-item>

					<el-form-item label="学生电话" class="select-block">
						<el-input v-model="vdh" placeholder="请输入电话" class='input' icon="add"></el-input>
						<span style="color: red;">*登陆电话</span>
					</el-form-item>

					<el-form-item label="缴费定金" class="select-block1">
						<el-input v-model="yuer" placeholder="请输入缴纳定金" icon="add"></el-input>
					</el-form-item>
					<div class="select-block1" style="margin-top: 5px;width: 15%;">
						<el-select v-model="vsklx" placeholder="请选择支付方式" icon="add">
							<el-option label="支付宝" value="zfb"></el-option>
							<el-option label="微信" value="wx"></el-option>
							<el-option label="现金" value="xj"></el-option>
							<el-option label="刷卡" value="sk"></el-option>
						</el-select>
					</div>

					<el-form-item label="学生性别" class="select-block">
						<el-select v-model="vxb" placeholder="请选择性别" icon="add" style="width:100%;" >
							<el-option label="男" value="男"></el-option>
							<el-option label="女" value="女"></el-option>
						</el-select>
					</el-form-item>

					
					<!--<el-form-item label="支付方式" class="select-block">-->
					<!--<el-checkbox  v-model="qx" style="float: left;margin-right: 5px;" @change="checkall2()" >全选</el-checkbox>-->
					<!--<el-checkbox   v-model="vzfb" >支付宝</el-checkbox>
				  <el-checkbox   v-model="vwx" >微信</el-checkbox>
				  <el-checkbox   v-model="vxj"  >现金</el-checkbox>
				  <el-checkbox   v-model="vsk" >刷卡</el-checkbox>
		  </el-form-item>-->
					<!-- <el-form-item label="学生标签" class="select-block2" >
					<div class="bqlist">

						<el-tag type="success" v-for="v in bqlist" class="list1" closable  @close = "" >{{v}}</el-tag>

						<el-button   class="tjlx" size="small" @click="componentsShow('bq')">+</el-button>

					</div>
 			</el-form-item> -->
				</el-collapse-item>

				<el-collapse-item accordion title="详细信息" name="1">
					<!-- <el-form-item label="是否启用" class="select-block">
				<el-select v-model="visqy"  >
						  <el-option label="启用" value="Y"></el-option>
							<el-option label="禁用" value="N" ></el-option>
				</el-select>
 			</el-form-item> -->
					<el-form-item label="年级班级" class="select-block">
						<el-select v-model="vnjbj"  style="width:100%;" placeholder="请选择年级">
					    <el-option :label="v.njmc" :value="v.id" v-for="v in comboxlist"></el-option>
			            </el-select>
			        </el-form-item>    
					<el-form-item label="出生日期" class="select-block">
						<!-- <el-input v-model="vcsrq" placeholder="请输入出生日期" icon="add" ></el-input> -->
						<el-date-picker v-model="vcsrq" type="date" placeholder="请选择出生日期" style="width:100%;"> </el-date-picker>
					</el-form-item>
					<el-form-item label="父母电话" class="select-block">
						<el-input v-model="vfmdh" placeholder="请输入父母手机号" icon="add"></el-input>
					</el-form-item>
					<el-form-item label="微信号码" class="select-block">
						<el-input v-model="vwx" placeholder="请输入微信号" icon="add"></el-input>
					</el-form-item>
					
					<el-form-item label="公立学校" class="select-block">
						<el-input v-model="vglxx1" placeholder="请输入公立学校" icon="add"></el-input>
					</el-form-item>
					<!--<el-tag type="success" class="list1"   v-for="(v,index) in bqList">
 					{{v}}
 				<i class="el-icon-close del1" @click = "delbq(v)"></i>
 				</el-tag>-->
					<el-button type="" size="small" class="submit1" @click="componentsShow('bq',1)">。。。</el-button>

					<el-form-item label="家庭地址" class="select-block" style='width: 100%;'>
						<el-input v-model="vjtdz" placeholder="请输入家庭地址" icon="add"></el-input>
					</el-form-item>

					<el-form-item label="招生来源" class="select-block" style='width: 100%;'>
						<el-input v-model="vzsly" placeholder="请输入招生来源" icon="add"></el-input>
					</el-form-item>
					<el-form-item label="学生标签" class="select-block" style='width: 100%;'>
						<el-tag type="success" class="list1" v-for="(v,index) in bqList">
							{{v}}
							<i class="el-icon-close del1" @click="delbq(v)"></i>
						</el-tag>
						<el-button type="" size="small" class="submit" @click="componentsShow('bq')">+标签</el-button>

					</el-form-item>
				</el-collapse-item>
			</el-collapse>

		</el-form>
		<el-button type="primary" class="submit" @click="submit22(false)">报名</el-button>
		<el-button type="danger" class="submit" @click="cancel">退出</el-button>
		<!-- <el-button type="info" class="submit" @click="submit22(true)">保存并缴费</el-button> -->
		<!-- <el-button type="primary" class="submit" @click="submit22(true)">保存并缴费</el-button> -->
		<!-- <router-link v-on:click.native="submit22(false)" :to="{path:'/cost/pay',query: {iid:this.xszwm,id:this.xsid}}" >
			<el-button type="info" class="submit" >保存并缴费</el-button>
		</router-link> -->
		<!-- v-on:click.native="submit22(false)" -->
		<!-- <router-link v-on:click.native="doSomethingCool"to="/cost/pay">跳转</router-link> -->
		<!-- <el-button type="info" class="submit" @click="submit22(false)">保a存</el-button>
    <el-button type="info" class="submit" @click="submit22(true)">保存并缴费1a</el-button> -->
		<BqComponent v-if="portComponents.bq.toggle" @close="componentsHide" :params="portComponents.bq.params"></BqComponent>

	</el-dialog>
</template>
<script type="text/javascript">
	import qs from 'qs'
	//	import BqComponent from './bq'
	import BqComponent from '../../admin/xxjbszManage/bq'
	export default {
		components: { BqComponent },
		data() {
			return {
				comboxlist:[],
				bqList: [],
				vglxx1:'',
				vglxx2:[],
				vzfb: false,
				vwx: false,
				vxj: false,
				vsk: false,
				vsklx:'xj',
				vdh: '',
				vmm: '',
				vxb: '',
				vzwm: '',
				vywm: '',
				visqy: 'Y',
				vcsrq: '',
				vzsly: '',
				vfmdh: '',
				vwx: '',
				vjtdz: '',
				vglxx: '',
				vnjbj: '',
				yuer: '',
				vxh: '',
				activeNames: '1',
				ysbjid: '',
				ysbjmc: '',
				dialogTableVisible: true,
				ysbjList: [],
				xsid: '',
				xszwm: '',
				portComponents: {
					bq: {
						type: 'bq',
						toggle: false,
						params: '',
						data: {}
					},
				}
			}
		},
		created() {
			this.ysbjid = this.$route.query.iid
			this.ysbjmc = this.$route.query.mc
			this.ysbj();
			this.getcomlist();
		},
		methods: {
			getcomlist(){
          	 var logininfo = JSON.parse(localStorage.logininfo);
             var params2 = qs.stringify({
                      yhid:logininfo.id,
                    xxid:logininfo.xxid
               })
             //执行
                 this.axios.post(this.$store.state.api + 'nj/getlist',  params2 )
                 .then(res => {
                 let data = res.data.data;
                  let list = data.list;
                  this.comboxlist = list;
                 }).catch(res => {
				})
          } ,
			delbq(bq) {
				var dd = [];
				for(let i in this.bqList) {
					if(this.bqList[i] == bq) {
						continue
					} else {
						dd.push(this.bqList[i]);
					}
				}
				this.bqList = dd;
			},
			ysbj() {
				var logininfo = JSON.parse(localStorage.logininfo);
				var params3 = qs.stringify({
					yhid: logininfo.id,
					xxid: logininfo.xxid
				});
				this.axios.post(this.$store.state.api + 'ysbj/bjsylist', params3)
					.then(res => {
						this.ysbjList = res.data.data;
					}).catch(res => {})
			},
			submit1() {
				if(!this.vzwm) {
					this.$message.warning('请填写中文名');
					this.$store.state.loading = false;
					return;
				} else if(!this.ysbjid) {
					this.$message.warning('请选择预设班级');
					this.$store.state.loading = false;
					return;
				} else if(!this.vywm) {
					this.$message.warning('请填写英文名');
					this.$store.state.loading = false;
					return;
				} else if(!this.vdh) {
					this.$message.warning('请填写学生电话');
					this.$store.state.loading = false;
					return;
				}

				this.$router.push({ path: '/cost/pay', query: { iid: this.xszwm, id: this.xsid } })
			},
			submit22(isjiaofei) {
				//检测
				this.$store.state.loading = true;
				if(!this.vzwm) {
					this.$message.warning('请填写中文名');
					this.$store.state.loading = false;
					return;
				} else if(!this.ysbjid) {
					this.$message.warning('请选择预设班级');
					this.$store.state.loading = false;
					return;
				} else if(!this.vywm) {
					this.$message.warning('请填写英文名');
					this.$store.state.loading = false;
					return;
				} else if(!this.vdh) {
					this.$message.warning('请填写学生电话');
					this.$store.state.loading = false;
					return;
				}

				var time1 = this.$.getLocalTimeNo0(Date.parse(this.vcsrq));
				var logininfo = JSON.parse(localStorage.logininfo);
				var params3 = qs.stringify({
					dh: this.vdh,
					xb: this.vxb,
					zwm: this.vzwm,
					ywm: this.vywm,
					isqy: this.visqy,
					csrq: time1,
					zsly: this.vzsly,
					fmdh: this.vfmdh,
					wx: this.vwx,
					jtdz: this.vjtdz,
					glxx: this.vglxx,
					njbj: this.vnjbj,
					bq: this.bqList + '',
					ysbjid: this.ysbjid,
					yuer: this.yuer,
					sklx: this.vsklx,
					//							zfb: this.vzfb?'Y':'N', // 支付宝
					//							wx: this.vwx?'Y':'N', // 微信
					//						    xj: this.vxj?'Y':'N', // 现金
					//							sk: this.vsk?'Y':'N', // 刷卡
					yhid: logininfo.id,
					xxid: logininfo.xxid
				});
				//执行
				this.axios.post(this.$store.state.api + 'xs/insert', params3)
					.then(res => {
						this.$message.warning(res.data.msg);
						this.xsid = res.data.data.xsid
						this.xszwm = res.data.data.xszwm
						if(res.data.code == 1) {
							if(isjiaofei) {
								this.$emit('close', { type: 'add', cancel: false });
								this.submit1()
							} else {
								this.$emit('close', { type: 'add', cancel: false });
							}
							this.$store.state.loading = false;
						} else {
							this.$emit('close', { type: 'add', cancel: false });
							this.$store.state.loading = false;
						}
					}).catch(res => {
						this.$message.warning("服务器繁忙，请重试" + res.data.msg);
						this.$store.state.loading = false;
					})
			},
			cancel() {
				if(this.$route.query.iid) {
					this.$emit('close', { type: 'add', cancel: true })
					this.$router.back(-1)
				} else {
					this.$emit('close', { type: 'add', cancel: true })
				}
			},
			componentsShow(type, data) { //显示组件
				console.log(type, data)
				for(let i in this.portComponents) {
					if(type == this.portComponents[i].type) {
						this.portComponents[i].toggle = true;
						this.portComponents[i].params = data;
						if(this.portComponents[i].data.type == 'single') {
							this.portComponents[i].data.index = data.row.id
						} else if(this.portComponents[i].data.type == 'multiple') {
							this.portComponents[i].data.index = this.multipleDelNum;
						} else {
							return;
						}
						return;
					}
				}
			},
			componentsHide(setting) { //关闭组件
				if(setting.name){
					this.portComponents.bq.toggle = false;
					for(let b in setting.clist) {
						this.vglxx2.push(setting.clist[b]);
						this.vglxx1 = this.vglxx2+''
					}
				}else{
					for(let i in this.portComponents) {
					if(setting.type == this.portComponents[i].type) {
						this.portComponents[i].toggle = false;
						if(this.portComponents[i].type == 'bq') {
							if(!setting.cancel) {
								for(let b in setting.clist) {
									this.bqList.push(setting.clist[b]);
								}

							}
						} else {
							if(!setting.cancel) {}
						}
						return;
					}
				}
				}
				
			}
		}
	}
</script>
<style lang="less" scoped>
	.wrap {
		text-align: center;
	}
	
	.bt {
		position: absolute;
		width: 100%;
		height: 50px;
		margin: 0 auto;
		top: 0;
		left: 0;
		background: #50BFFF;
		color: white;
		text-align: left;
		line-height: 50px;
		font-size: 16px;
		padding-left: 15px;
	}
	
	.form {
		text-align: left;
		margin-top: 8px;
	}
	
	.input {
		width: 180px;
		display: inline-block;
	}
	
	.select-block {
		// display: block;
		float: left;
		width: 45%;
	}
	.select-block1 {
		// display: block;
		float: left;
		width: 30%;
	}
	
	.select-block2 {
		// display: block;
		float: left;
		width: 95%;
		.tjlx {
			// border: 1px solid #D3EEC7;
			// color: #67C23A;
			// border-radius: 5px;
			// text-align: center;
			// line-height: 30px;
		}
		.tjlx:hover {
			background-color: #67C23A;
			cursor: pointer;
			color: #fff;
		}
	}
	
	.submit {
		width: 120px;
		margin-top: 5px;
	}.submit1 {
		width: 85px;
		margin-top: 5px;
	}
	
	.el-checkbox+.el-checkbox {
		margin-left: 10px;
	}
</style>